<template>
	<view class="content">
		<u-sticky style="top:0px;">
			<view class="persion-title">
				<view style="width: 100%;height: 80rpx; display: flex;flex-direction: row;align-items: center;">
					<text style="margin-right: 20rpx;">位置</text>
					<u-search placeholder="日照香炉生紫烟" :showAction="false" :clearabled="true" shape="round"
						v-model="keyword"></u-search>
				</view>
			</view>
		</u-sticky>
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in indexList" :key="index">
				<u-cell center>
					<template #title>
						<view class="cell-title">
							<view class="cell-title-item">
								<u-button style="width:50rpx;height: 40rpx;" type="primary" icon="star" :plain="true" size="small" 
									shape="circle" text="34"></u-button>
								<text style="font-weight: bold;flex: 1;">名称</text>
							</view>							
							<view class="cell-title-item">
								<u-icon name="clock" color="#2979ff" size="18"></u-icon>
								<text>商家</text>
								<view style="font-size: 12px;margin-left: 5px;margin-right: 5px;color: gray;">|</view>
								<u-icon name="map"></u-icon>
								<text>12.5km</text>
							</view>
							<view class="cell-title-item">
								<u-button style="width:100px; height: 40rpx;margin-right: 5px;" type="primary" 
								:plain="true" size="small" text="最近可:12:00"></u-button>
								<font style="color: gray;font-size: 12rpx;flex: 1;">(已售出499)</font>
							</view>
						</view>
					</template>
					<template #icon>
						<u-avatar shape="square" size="80" :src="item.url" customStyle="margin: -3px 5px -3px 0">
						</u-avatar>
					</template>
					<template #right-icon>
						<u-button type="primary" shape="circle" size="small" text="立即预约"></u-button>
					</template>
				</u-cell>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				current: 0,
				currentNum: 0,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				indexList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			change(e) {
				console.log('change', e);
			},
			click(e) {
				console.log('click', e);
			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 10; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		background-color: whitesmoke;
	}

	.persion-title {
		background-color: aquamarine;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		padding-left: 20rpx;
		padding-right: 20rpx;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.cell-title {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.cell-title-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 5px;
	}
</style>
